<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/pc_common.css">
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/botton.css">
    <link rel="stylesheet" href="../inf/font_n5t1ksdn35/iconfont.css">
    <link rel="stylesheet" href="../css/Shopping.css">
    <link rel="stylesheet" href="../css/index.css">




</head>

<body>
    <!-- 版心宽1098 -->


    <!-- 头部：高40 -->
    <div class="leadh">

    </div>
    <div class="leads">

    </div>

    <!--广告：高488宽1536  -->
    <div class="banner">
        <div class="showImg">
            <div class="loadImg">
                <ul>
                    <li class="switchOne">
                        <img src="../img/pic1.jpg" alt="">

                        <h3>进入DW世界</h3>
                        <a href="">
                            <span></span><span>发现</span></a>
                    </li>
                    <li class="switchTow"><img src="../img/pic2.jpg" alt="">
                        <h3>TRADITION传世系列呈现逆跳日期腕表全新力作</h3>
                        <a href="">
                            <span></span><span>发现</span></a>
                    </li>
                    <li class="switchThree"><img src="../img/pic3.jpg" alt="">
                        <h3>技艺与深厚美学造诣 : 宝玑推出全新双旋转陀飞轮时计臻品</h3>
                        <a href="">
                            <span></span><span>发现</span></a>
                    </li>
                    <li class="switchOne">
                        <img src="../img/pic1.jpg" alt="">
                        <h3>进入DW世界</h3>
                        <a href="">
                            <span></span><span>发现</span></a>
                    </li>
                </ul>

            </div>
            <a href="javascript:" class="prve"></a>
            <a href="javascript:" class="next"></a>
        </div>
    </div>

    <!--折扣：高55 1098  -->
    <div class="dis-box">
        <div class="dis">
            <p>4月9日起，享满800减80/1600减160/2400减240</p>
        </div>
    </div>


    <!-- 推荐：rm2522 -->
    <div class="rm-box">
        <div class="rm">
            <div class="rmRandom">
                <p>为您推荐</p>
                <div class="showGoods">

                    <ul>
                        <li>
                            <a href="../html/detail.html">
                                <img src="../img/random1.png" alt="">
                                <p class="newGoods">新品上市</p>
                                <p>ICONIC MOTION</p>
                                <p>
                                    <span></span>
                                </p>

                                <p>玫瑰金色</p>
                                <p><span>￥</span><span>1,690&nbsp;起</span></p>
                            </a>
                        </li>
                        <li>
                            <a href="../html/detail.html">
                                <img src="../img/random1.png" alt="">
                                <p class="newGoods">新品上市</p>
                                <p>ICONIC MOTION</p>
                                <p>
                                    <span></span>
                                </p>

                                <p>玫瑰金色</p>
                                <p><span>￥</span><span>1,690&nbsp;起</span></p>
                            </a>
                        </li>
                        <li>
                            <a href="../html/detail.html">
                                <img src="../img/random1.png" alt="">
                                <p class="newGoods">新品上市</p>
                                <p>ICONIC MOTION</p>
                                <p>
                                    <span></span>
                                </p>

                                <p>玫瑰金色</p>
                                <p><span>￥</span><span>1,690&nbsp;起</span></p>
                            </a>
                        </li>
                        <li>
                            <a href="../html/detail.html">
                                <img src="../img/random1.png" alt="">
                                <p class="newGoods">新品上市</p>
                                <p>ICONIC MOTION</p>
                                <p>
                                    <span></span>
                                </p>

                                <p>玫瑰金色</p>
                                <p><span>￥</span><span>1,690&nbsp;起</span></p>
                            </a>
                        </li>
                    </ul>


                </div>

                <div class="ladyGoods">
                    <div class="ladyBanner">
                        <img src="../img/lady.jpg" alt="">
                        <h3>女士精选</h3>
                        <p>质感格调 写意优雅</p>
                        <p>灵动光泽流转 至美律动</p>
                        <a href="">
                            <p>立即探索</p>
                        </a>


                    </div>
                    <div class="showGoods">
                        <ul>
                            <li>
                                <a href="../html//detail.html">
                                    <img src="../img/random1.png" alt="">
                                    <p class="newGoods">新品上市</p>
                                    <p>ICONIC MOTION</p>
                                    <p>
                                        <span></span>
                                    </p>

                                    <p>玫瑰金色</p>
                                    <p><span>￥</span><span>1,690&nbsp;起</span></p>
                                </a>
                            </li>
                            <li>
                                <a href="../html//detail.html">
                                    <img src="../img/random1.png" alt="">
                                    <p class="newGoods">新品上市</p>
                                    <p>ICONIC MOTION</p>
                                    <p>
                                        <span></span>
                                    </p>

                                    <p>玫瑰金色</p>
                                    <p><span>￥</span><span>1,690&nbsp;起</span></p>
                                </a>
                            </li>
                            <li>
                                <a href="../html//detail.html">
                                    <img src="../img/random1.png" alt="">
                                    <p class="newGoods">新品上市</p>
                                    <p>ICONIC MOTION</p>
                                    <p>
                                        <span></span>
                                    </p>

                                    <p>玫瑰金色</p>
                                    <p><span>￥</span><span>1,690&nbsp;起</span></p>
                                </a>
                            </li>
                            <li>
                                <a href="../html//detail.html">
                                    <img src="../img/random1.png" alt="">
                                    <p class="newGoods">新品上市</p>
                                    <p>ICONIC MOTION</p>
                                    <p>
                                        <span></span>
                                    </p>

                                    <p>玫瑰金色</p>
                                    <p><span>￥</span><span>1,690&nbsp;起</span></p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="manGoods">
                    <div class="manBanner">
                        <img src="../img/man.jpg" alt="">
                        <h3>男士精选</h3>
                        <p>经典沿袭 不凡型格</p>
                        <p>精湛匠心工艺 时刻出潮</p>
                        <a href="">
                            <p>立即探索</p>
                        </a>
                    </div>
                    <div class="showGoods">
                        <ul>
                            <li>
                                <a href="../html/detail.html">
                                    <img src="../img/random1.png" alt="">
                                    <p class="newGoods">新品上市</p>
                                    <p>ICONIC MOTION</p>
                                    <p>
                                        <span></span>
                                    </p>

                                    <p>玫瑰金色</p>
                                    <p><span>￥</span><span>1,690&nbsp;起</span></p>
                                </a>
                            </li>
                            <li>
                                <a href="../html/detail.html">
                                    <img src="../img/random1.png" alt="">
                                    <p class="newGoods">新品上市</p>
                                    <p>ICONIC MOTION</p>
                                    <p>
                                        <span></span>
                                    </p>

                                    <p>玫瑰金色</p>
                                    <p><span>￥</span><span>1,690&nbsp;起</span></p>
                                </a>
                            </li>
                            <li>
                                <a href="../html/detail.html">
                                    <img src="../img/random1.png" alt="">
                                    <p class="newGoods">新品上市</p>
                                    <p>ICONIC MOTION</p>
                                    <p>
                                        <span></span>
                                    </p>

                                    <p>玫瑰金色</p>
                                    <p><span>￥</span><span>1,690&nbsp;起</span></p>
                                </a>
                            </li>
                            <li>
                                <a href="../html/detail.html">
                                    <img src="../img/random1.png" alt="">
                                    <p class="newGoods">新品上市</p>
                                    <p>ICONIC MOTION</p>
                                    <p>
                                        <span></span>
                                    </p>

                                    <p>玫瑰金色</p>
                                    <p><span>￥</span><span>1,690&nbsp;起</span></p>
                                </a>
                            </li>
                        </ul>

                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="leadf">

    </div>



</body>

<script src="../js/jquery-3.6.0.min.js"></script>
<script src="../js/api.js"></script>
<script src="../js/cookie.js"></script>
<script src="../js/hearder.js"></script>

<script>
    $(".leadh").load("../html/hearder.html")
    $(".leadf").load("../html/footer.html")
    $(".leads").load("../html/Shopping.html")

    var index = 0;
    var moveNum = -1500;
    var timer;

    lunbo()
    $(".prve").on("click", function () {
        if ($(".loadImg").is(":animated")) return false;
        clearInterval(timer)
        // $(".loadImg").stop(true, false);
        prve()
        lunbo()
    })
    $(".next").on("click", function () {
        if ($(".loadImg").is(":animated")) return false;
        clearInterval(timer)
        // $(".loadImg").stop(true, false);
        next()
        lunbo()
    })
    function lunbo() {
        timer = setInterval(function () {
            next()
        }, 2000)
    }
    function prve() {
        if (index <= 0) {
            index = 3;
            console.log(index * moveNum);
            $(".loadImg").animate({ left: (index * moveNum) }, 0, function () {
                index--
            });
            $(".loadImg").animate({ left: (index * moveNum) }, 1000, console.log("运动完成"));
        } else {
            index--;
            $(".loadImg").animate({ left: (index * moveNum) }, 1000, console.log("运动完成"));

        }
    }
    function next() {
        if (index >= 2) {
            index++
            $(".loadImg").animate({ left: (index * moveNum) }, 1000, function () {
            });
            index = 0;
            $(".loadImg").animate({ left: (index * moveNum) }, 0,);
        } else {
            index++
            $(".loadImg").animate({ left: (index * moveNum) }, 1000,);
        }
    }





</script>


</html>